import { ProFormDigit } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd/lib';
import React, { useMemo } from 'react';

type FormProps = {
  open: boolean;
  current: API.GeoipIp | undefined;
  onCancel: () => void;
  onSubmit: (values: API.GeoipIp) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, current, onCancel, onSubmit } = props;
  if (!open) {
    return null;
  }



  return (
    <DrawerForm<API.GeoipIp>
      open={open}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}IP`}
      width={900}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <ProFormText
            name="ip"
            label="IP地址 (支持掩码 /15 - 32)"
            rules={[{ required: true, message: '请输入IP地址' }]}
          />
        </Col>
        {/* <Col span={4}>
          <ProFormDigit
            name="subnetMask"
            label="掩码"
            min={15}
            max={32}
            allowClear={true}
          />
        </Col> */}
      </Row>
      <ProFormTextArea name="remark" label="备注" />
    </DrawerForm>
  );
};

export default Form;
